<!DOCTYPE html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<!-- Tests that overflow controls are repainted after compositing is disabled. There should be three green squares and no visible overflow controls -->
<style>
.composited {
will-change:transform;
}

.container {
width: 100px;
height:100px;
position:absolute;
background-color: green;
overflow:auto;
border: 0px;
}

</style>
<body onload="test()">
<iframe id="vertical" class="composited container" src="resources/repaint-after-losing-scrollbars-iframe.html"></iframe>
<iframe id="horizontal" class="composited container" style="left: 150px" src="resources/repaint-after-losing-scrollbars-iframe.html"></iframe>
<iframe id="both" class="composited container" style="left: 300px" src="resources/repaint-after-losing-scrollbars-iframe.html"></iframe>
</body>
<script>
function finishTest() {
    document.getElementById("vertical").contentDocument.body.classList.remove("tall"); // topmost iframe loses a vertical scrollbar
    document.getElementById("horizontal").contentDocument.body.classList.remove("wide"); // middle iframe loses a horizontal scrollbar
    document.getElementById("both").contentDocument.body.classList.remove("wide"); // bottom iframe loses both
    document.getElementById("both").contentDocument.body.classList.remove("tall"); // bottom iframe loses both
}

function test() {
    document.getElementById("vertical").contentDocument.body.classList.add("tall"); // topmost iframe starts with a vertical scrollbar
    document.getElementById("horizontal").contentDocument.body.classList.add("wide"); // middle iframe starts with a horizontal scrollbar
    document.getElementById("both").contentDocument.body.classList.add("wide"); // bottom iframe starts with both
    document.getElementById("both").contentDocument.body.classList.add("tall"); // vertical and horizontal scrollbars
    runAfterLayoutAndPaint(finishTest, true);
}
</script>
